<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jerrymouse</title>
</head>
<body>
<div id="header">
    <p class="h1">Jerrymouse Web Server</p>
    <p class="h2">A Light weight, multi-thread web server</p>
    <button>REPO</button>
</div>
<div id="features">
    <p>Features:</p>
</div>


<style>
    * {
        padding: 0;
        margin: 0;
        font-family: 'Courier New', Courier, monospace;
    }

    #features {
        padding: 32px 64px;
    }

    #features p:nth-of-type(1) {
        font-size: 2rem;
    }

    #header {
        padding: 32px 64px;
        /* font-size: 3rem; */
        font-weight: bold;
        font-family: 'Courier New', Courier, monospace;
        /* text-align: center; */
        background: #123456;
        height: 300px;
    }

    #header p:nth-of-type(1) {
        color: white;
        font-weight: bold;
        font-size: 3rem;
    }

    #header p:nth-of-type(2) {
        color: white;
        font-size: 1.2rem;
        margin-top: 10px;
    }

    #header button {
        outline: none;
        margin-top: 160px;
        padding: 8px 16px;
        background: #56789a;
        border: 4px solid white;
        height: 48px;
        width: 180px;
        font-size: 1.2rem;
        color: white;
        font-weight: bold;
        cursor: pointer;
    }

    #header button:hover {
        background: #345678;
    }
</style>
</body>
</html>